<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>华为官网</title>
    <link rel="stylesheet" href="./css/index.css" />
  </head>
  <body>
    <!-- 页面头标签 -->
    <header>
      <!-- nav,导航标签 -->
      <nav>
        <div id="user-box">
          <a href="#">选择区域/语言</a>
          <a href="#">登录</a>
          <a href="#">注册</a>
        </div>
        <div id="nav-bar">
          <img src="images/logo.png" />
          <ul id="nav-list" class="clear-fix">
            <li id="iwant">
              <span>我想...</span>
            </li>
            <li><a href="#">个人及家用产品</a></li>
            <li><a href="#">商用解决方案</a></li>
            <li><a href="#">行业话题</a></li>
            <li><a href="#">技术支持</a></li>
            <li><a href="#">合作伙伴</a></li>
            <li><a href="#">开发者</a></li>
            <li><a href="#">华为商城</a></li>
          </ul>

          <span id="search">Q</span>
        </div>
      </nav>
    </header>

    <div id="banner"></div>

    <main>
      <div class="item big">
        <img src="images/pic1.jpg" />
        <div class="mask"></div>
        <div class="intro">
          <h3>迎接未来世界的正确姿势</h3>
          <p>
            人工智能应用于医疗、金融、制造、能源、教育等垂直行业，必将与重大的社会经济变革、教育变革、思想变革、文化变革等同步，成为下一次工业革命的核心驱动力。
          </p>
        </div>
      </div>
      <div>
        <div class="item small">
          <img src="images/pic2.jpg" />
          <div class="mask"></div>
          <div class="intro">
            <h3>迎接未来世界的正确姿势</h3>
            <p>
              人工智能应用于医疗、金融、制造、能源、教育等垂直行业，必将与重大的社会经济变革、教育变革、思想变革、文化变革等同步，成为下一次工业革命的核心驱动力。
            </p>
          </div>
        </div>
        <div class="item small">
          <img src="images/pic3.jpg" />
          <div class="mask"></div>
          <div class="intro">
            <h3>迎接未来世界的正确姿势</h3>
            <p>
              人工智能应用于医疗、金融、制造、能源、教育等垂直行业，必将与重大的社会经济变革、教育变革、思想变革、文化变革等同步，成为下一次工业革命的核心驱动力。
            </p>
          </div>
        </div>
      </div>
      <div class="item small">
        <img src="images/pic4.jpg" />
        <div class="mask"></div>
        <div class="intro">
          <h3>迎接未来世界的正确姿势</h3>
          <p>
            人工智能应用于医疗、金融、制造、能源、教育等垂直行业，必将与重大的社会经济变革、教育变革、思想变革、文化变革等同步，成为下一次工业革命的核心驱动力。
          </p>
        </div>
      </div>
      <div class="item small">
        <img src="images/pic5.jpg" />
        <div class="mask"></div>
        <div class="intro">
          <h3>迎接未来世界的正确姿势</h3>
          <p>人工智能应用于医疗</p>
        </div>
      </div>
      <div class="middle"></div>
    </main>

    <div style="background-color: #f5f5f5">
      <section id="news-and-active">
        <div id="news">
          <h3>
            <a href="#">新闻</a>
          </h3>
          <h6>
            <a href="#">杜伊斯堡市和华为签署合作备忘录 携手打造智慧城市 </a>
          </h6>
          <span>2018-01-12</span>
          <h6>
            <a href="#">杜伊斯堡市和华为签署合作备忘录 携手打造智慧城市 </a>
          </h6>
          <span>2018-01-12</span>
          <h6>
            <a href="#">杜伊斯堡市和华为签署合作备忘录 携手打造智慧城市 </a>
          </h6>
          <span>2018-01-12</span>
        </div>
        <div id="active"></div>
      </section>
    </div>

    <footer></footer>
  </body>
</html>
